react-native-google-map-autocomplete 選択地点の緯度経度を取得する
#ReactNative
背景
検索バーに候補として出てくる地点を選択すると、callback関数が実行され、引数に選択地点のデータが渡される。
デフォルトでは、そのデータには地点の緯度経度情報が入ってない。
入れるためにはGooglePlacesAutocompleteのプロパティ値を少し工夫する必要がある。
https://scrapbox.io/files/615aec50b1aaec002357bc0c.png
結論
fetchDetailsをtrueにし、GooglePlacesDetailsQueryにgeometryを指定する。
code: sample.js
<GooglePlacesAutocomplete
placeholder='Search'
onPress={(data, details, null) => ...}
query={{key: '......', language: 'ja',}}
fetchDetails={true}
GooglePlacesDetailsQuery={{ fields: 'geometry', }}
/>
fetchDetails=trueにしないと絶対にダメ。これしないとdetailsにちゃんとした値が入らない。
GooglePlacesDetailsQuery={{ fields: 'geometry', }}があることで、detailsに緯度経度関連の情報が入ってくる。
裏で何をしてるの？
a.iconPlace Details APIを叩いてる
実際にDetails APIを調べると、fieldsというパラメータを与えるところがある。
Place Details  |  Places API  |  Google Developers
detailsには以下のような値が入ってるだろう
code: sample.json
"geometry":
{
"location": { "lat": -33.866489, "lng": 151.1958561 },
"viewport":
{
"northeast":
{ "lat": -33.8655112697085, "lng": 151.1971156302915 },
"southwest":
{ "lat": -33.86820923029149, "lng": 151.1944176697085 },
},
},